<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
<meta name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">

    <meta name="author" content="ZhangPing">





<title>Flutter--GridView组件 | ZhangPing&#39;s Blog</title>



    <link rel="icon" href="/favicon.ico">




    <!-- stylesheets list from _config.yml -->
    
    <link rel="stylesheet" href="/css/style.css">
    



    <!-- scripts list from _config.yml -->
    
    <script src="/js/script.js"></script>
    
    <script src="/js/tocbot.min.js"></script>
    



    
    
        
    


<meta name="generator" content="Hexo 4.2.0"></head>
<body>
    <div class="wrapper">
        <header>
    <nav class="navbar">
        <div class="container">
            <div class="navbar-header header-logo"><a href="/">ZhangPing&#39;s Blog</a></div>
            <div class="menu navbar-right">
                
                    <a class="menu-item" href="/archives">Posts</a>
                
                    <a class="menu-item" href="/category">Categories</a>
                
                    <a class="menu-item" href="/tag">Tags</a>
                
                    <a class="menu-item" href="/about">About</a>
                
                <input id="switch_default" type="checkbox" class="switch_default">
                <label for="switch_default" class="toggleBtn"></label>
            </div>
        </div>
    </nav>

    
    <nav class="navbar-mobile" id="nav-mobile">
        <div class="container">
            <div class="navbar-header">
                <div>
                    <a href="/">ZhangPing&#39;s Blog</a><a id="mobile-toggle-theme">·&nbsp;Light</a>
                </div>
                <div class="menu-toggle" onclick="mobileBtn()">&#9776; Menu</div>
            </div>
            <div class="menu" id="mobile-menu">
                
                    <a class="menu-item" href="/archives">Posts</a>
                
                    <a class="menu-item" href="/category">Categories</a>
                
                    <a class="menu-item" href="/tag">Tags</a>
                
                    <a class="menu-item" href="/about">About</a>
                
            </div>
        </div>
    </nav>

</header>
<script>
    var mobileBtn = function f() {
        var toggleMenu = document.getElementsByClassName("menu-toggle")[0];
        var mobileMenu = document.getElementById("mobile-menu");
        if(toggleMenu.classList.contains("active")){
           toggleMenu.classList.remove("active")
            mobileMenu.classList.remove("active")
        }else{
            toggleMenu.classList.add("active")
            mobileMenu.classList.add("active")
        }
    }
</script>
        <div class="main">
            <div class="container">
    
    
        <div class="post-toc">
    <div class="tocbot-list">
    </div>
    <div class="tocbot-list-menu">
        <a class="tocbot-toc-expand" onclick="expand_toc()">Expand all</a>
        <a onclick="go_top()">Back to top</a>
        <a onclick="go_bottom()">Go to bottom</a>
    </div>
</div>

<script>
    document.ready(
        function () {
            tocbot.init({
                tocSelector: '.tocbot-list',
                contentSelector: '.post-content',
                headingSelector: 'h1, h2, h3, h4, h5',
                collapseDepth: 1,
                orderedList: false,
                scrollSmooth: true,
            })
        }
    )

    function expand_toc() {
        var b = document.querySelector(".tocbot-toc-expand");
        tocbot.init({
            tocSelector: '.tocbot-list',
            contentSelector: '.post-content',
            headingSelector: 'h1, h2, h3, h4, h5',
            collapseDepth: 6,
            orderedList: false,
            scrollSmooth: true,
        });
        b.setAttribute("onclick", "collapse_toc()");
        b.innerHTML = "Collapse all"
    }

    function collapse_toc() {
        var b = document.querySelector(".tocbot-toc-expand");
        tocbot.init({
            tocSelector: '.tocbot-list',
            contentSelector: '.post-content',
            headingSelector: 'h1, h2, h3, h4, h5',
            collapseDepth: 1,
            orderedList: false,
            scrollSmooth: true,
        });
        b.setAttribute("onclick", "expand_toc()");
        b.innerHTML = "Expand all"
    }

    function go_top() {
        window.scrollTo(0, 0);
    }

    function go_bottom() {
        window.scrollTo(0, document.body.scrollHeight);
    }

</script>
    

    
    <article class="post-wrap">
        <header class="post-header">
            <h1 class="post-title">Flutter--GridView组件</h1>
            
                <div class="post-meta">
                    
                        Author: <a itemprop="author" rel="author" href="/">ZhangPing</a>
                    

                    
                        <span class="post-time">
                        Date: <a href="#">February 10, 2020&nbsp;&nbsp;21:00:00</a>
                        </span>
                    
                    
                        <span class="post-category">
                    Category:
                            
                                <a href="/categories/Flutter/">Flutter</a>
                            
                        </span>
                    
                </div>
            
        </header>

        <div class="post-content">
            <h2 id="一、Flutter-GridView-组件的常用参数"><a href="#一、Flutter-GridView-组件的常用参数" class="headerlink" title="一、Flutter GridView 组件的常用参数"></a>一、Flutter GridView 组件的常用参数</h2><p>即网格列表组件，同Android中的GridView样式。</p>
<p>GridView 创建网格列表有多种方式，主要有两种：</p>
<p>1、可以通过 GridView.count 实现网格布局<br>2、通过 GridView.builder 实现网格布局</p>
<p><strong>常用属性：</strong></p>
<table>
<thead>
<tr>
<th>名称</th>
<th>类型</th>
<th>说明</th>
</tr>
</thead>
<tbody><tr>
<td>scrollDirection</td>
<td>Axis</td>
<td>滚动方法</td>
</tr>
<tr>
<td>padding</td>
<td>EdgeInsetsGeometry</td>
<td>内边距</td>
</tr>
<tr>
<td>resolve</td>
<td>bool</td>
<td>组件反向排序</td>
</tr>
<tr>
<td>crossAxisSpacing</td>
<td>double</td>
<td>水平子 Widget 之间间距</td>
</tr>
<tr>
<td>mainAxisSpacing</td>
<td>double</td>
<td>垂直子 Widget 之间间距</td>
</tr>
<tr>
<td>crossAxisCount</td>
<td>int</td>
<td>一行的 Widget 数量</td>
</tr>
<tr>
<td>childAspectRatio</td>
<td>double</td>
<td>子 Widget 宽高比例</td>
</tr>
<tr>
<td>children</td>
<td></td>
<td><Widget>[ ]</td>
</tr>
<tr>
<td>gridDelegate</td>
<td><em>SliverGridDelegateWithFix edCrossAxisCount（常用） <br>SliverGridDelegateWithMax CrossAxisExtent</em></td>
<td>控制布局主要用在 GridView.builder 里面</td>
</tr>
</tbody></table>
<h2 id="二、FlutterGridView-count-实现网格布局"><a href="#二、FlutterGridView-count-实现网格布局" class="headerlink" title="二、FlutterGridView.count 实现网格布局"></a>二、FlutterGridView.count 实现网格布局</h2><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="string">'package:flutter/material.dart'</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="string">'res/listData.dart'</span>;</span><br><span class="line"><span class="function"><span class="keyword">void</span> <span class="title">main</span><span class="params">()</span> </span>=&gt; runApp(MyApp());</span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">MyApp</span> <span class="keyword">extends</span> <span class="title">StatelessWidget</span> </span>&#123;</span><br><span class="line">	<span class="meta">@override</span></span><br><span class="line">	<span class="function">Widget <span class="title">build</span><span class="params">(BuildContext context)</span> </span>&#123;</span><br><span class="line">	<span class="comment">// <span class="doctag">TODO:</span> implement build</span></span><br><span class="line">		<span class="keyword">return</span> MaterialApp(</span><br><span class="line">			home: Scaffold(</span><br><span class="line">			appBar: AppBar(title: Text(<span class="string">'FlutterDemo'</span>)),</span><br><span class="line">			body: LayoutContent(),</span><br><span class="line">		));</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">	</span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">LayoutContent</span> <span class="keyword">extends</span> <span class="title">StatelessWidget</span> </span>&#123;</span><br><span class="line">	<span class="function">List&lt;Widget&gt; <span class="title">_getListData</span><span class="params">()</span> </span>&#123;</span><br><span class="line">		<span class="keyword">var</span> tempList=listData.map((value)&#123;</span><br><span class="line">			<span class="keyword">return</span> Container(</span><br><span class="line">				child: Column(</span><br><span class="line">					children: &lt;Widget&gt;[</span><br><span class="line">					Image.network(value[<span class="string">"imageUrl"</span>]),</span><br><span class="line">					SizedBox(height: <span class="number">12</span>),</span><br><span class="line">					Text(value[<span class="string">"title"</span>],textAlign: TextAlign.center,style:TextStyle(fontSize: <span class="number">20</span>)),</span><br><span class="line">				],</span><br><span class="line">			),</span><br><span class="line">				decoration: BoxDecoration(</span><br><span class="line">					border: Border.all(</span><br><span class="line">					color:Color.fromRGBO(<span class="number">230</span>, <span class="number">230</span>, <span class="number">230</span>, <span class="number">0.9</span>),</span><br><span class="line">					width: <span class="number">1.0</span></span><br><span class="line">				)</span><br><span class="line">			),</span><br><span class="line">		);</span><br><span class="line">	&#125;);</span><br><span class="line">	<span class="comment">// ('124124','124214')</span></span><br><span class="line">	<span class="keyword">return</span> tempList.toList();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="meta">@override</span></span><br><span class="line"><span class="function">Widget <span class="title">build</span><span class="params">(BuildContext context)</span> </span>&#123;</span><br><span class="line">	<span class="comment">// <span class="doctag">TODO:</span> implement build</span></span><br><span class="line">	<span class="keyword">return</span> GridView.count(</span><br><span class="line">		padding: EdgeInsets.all(<span class="number">20</span>),</span><br><span class="line">		crossAxisCount: <span class="number">2</span>,</span><br><span class="line">		crossAxisSpacing: <span class="number">20</span>,</span><br><span class="line">		mainAxisSpacing: <span class="number">20</span>,</span><br><span class="line">		<span class="comment">// childAspectRatio:0.7,</span></span><br><span class="line">		children: <span class="keyword">this</span>._getListData(),</span><br><span class="line">		);</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="三、Flutter-GridView-builder-实现网格布局"><a href="#三、Flutter-GridView-builder-实现网格布局" class="headerlink" title="三、Flutter GridView.builder 实现网格布局"></a>三、Flutter GridView.builder 实现网格布局</h2><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="string">'package:flutter/material.dart'</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="string">'res/listData.dart'</span>;</span><br><span class="line"><span class="function"><span class="keyword">void</span> <span class="title">main</span><span class="params">()</span> </span>=&gt; runApp(MyApp());</span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">MyApp</span> <span class="keyword">extends</span> <span class="title">StatelessWidget</span> </span>&#123;</span><br><span class="line">	<span class="meta">@override</span></span><br><span class="line">	<span class="function">Widget <span class="title">build</span><span class="params">(BuildContext context)</span> </span>&#123;</span><br><span class="line">	<span class="comment">// <span class="doctag">TODO:</span> implement build</span></span><br><span class="line">		<span class="keyword">return</span> MaterialApp(</span><br><span class="line">			home: Scaffold(</span><br><span class="line">			appBar: AppBar(title: Text(<span class="string">'FlutterDemo'</span>)),</span><br><span class="line">			body: LayoutContent(),</span><br><span class="line">		));</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">LayoutContent</span> <span class="keyword">extends</span> <span class="title">StatelessWidget</span> </span>&#123;</span><br><span class="line">	<span class="function">Widget <span class="title">_getListData</span><span class="params">(context,index)</span> </span>&#123;</span><br><span class="line">		<span class="keyword">return</span> Container(</span><br><span class="line">			child: Column(</span><br><span class="line">				children: &lt;Widget&gt;[</span><br><span class="line">					Image.network(listData[index][<span class="string">"imageUrl"</span>]),</span><br><span class="line">					SizedBox(height: <span class="number">12</span>),</span><br><span class="line">					Text(listData[index][<span class="string">"title"</span>],textAlign: TextAlign.center,style:TextStyle(fontSize:<span class="number">20</span>)),</span><br><span class="line">				],</span><br><span class="line">			),</span><br><span class="line"></span><br><span class="line">			decoration: BoxDecoration(</span><br><span class="line">				border: Border.all(</span><br><span class="line">					color:Color.fromRGBO(<span class="number">230</span>, <span class="number">230</span>, <span class="number">230</span>, <span class="number">0.9</span>),</span><br><span class="line">					width: <span class="number">1.0</span></span><br><span class="line">				)</span><br><span class="line">			),</span><br><span class="line">		); </span><br><span class="line">	&#125;</span><br><span class="line"></span><br><span class="line"><span class="meta">@override</span></span><br><span class="line"><span class="function">Widget <span class="title">build</span><span class="params">(BuildContext context)</span> </span>&#123;</span><br><span class="line"><span class="comment">// <span class="doctag">TODO:</span> implement build</span></span><br><span class="line">	<span class="keyword">return</span> GridView.builder(</span><br><span class="line">		itemCount: listData.length,</span><br><span class="line">		gridDelegate:SliverGridDelegateWithFixedCrossAxisCount(</span><br><span class="line">			<span class="comment">//横轴元素个数</span></span><br><span class="line">			crossAxisCount: <span class="number">2</span>,</span><br><span class="line">			<span class="comment">//纵轴间距</span></span><br><span class="line">			mainAxisSpacing: <span class="number">20.0</span>,</span><br><span class="line">			<span class="comment">//横轴间距</span></span><br><span class="line">			crossAxisSpacing: <span class="number">10.0</span>,</span><br><span class="line">			<span class="comment">//子组件宽高长度比例</span></span><br><span class="line">			childAspectRatio: <span class="number">1.0</span></span><br><span class="line">		),</span><br><span class="line">		itemBuilder: <span class="keyword">this</span>._getListData,</span><br><span class="line">		);</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

        </div>

        
            <section class="post-copyright">
                
                    <p class="copyright-item">
                        <span>Author:</span>
                        <span>ZhangPing</span>
                    </p>
                
                
                    <p class="copyright-item">
                        <span>Permalink:</span>
                        <span><a href="https://zhangpingv5.gitee.io/2020/02/10/Flutter--GridView%E7%BB%84%E4%BB%B6/">https://zhangpingv5.gitee.io/2020/02/10/Flutter--GridView%E7%BB%84%E4%BB%B6/</a></span>
                    </p>
                
                
                    <p class="copyright-item">
                        <span>License:</span>
                        <span>转载请注明出处</span>
                    </p>
                
                
                     <p class="copyright-item">
                         <span>Slogan:</span>
                         <span>Self-descipline grants me freedom.</span>
                     </p>
                

            </section>
        
        <section class="post-tags">
            <div>
                <span>Tag(s):</span>
                <span class="tag">
                    
                    
                        <a href="/tags/Flutter/"># Flutter</a>
                    
                        
                </span>
            </div>
            <div>
                <a href="javascript:window.history.back();">back</a>
                <span>· </span>
                <a href="/">home</a>
            </div>
        </section>
        <section class="post-nav">
            
                <a class="prev" rel="prev" href="/2020/02/11/Flutter--Paddiing%20Row%20Column%20Expanded%20%E7%BB%84%E4%BB%B6/">Flutter--Paddiing Row Column Expanded 组件</a>
            
            
            <a class="next" rel="next" href="/2020/02/08/Flutter--ListView%E7%BB%84%E4%BB%B6/">Flutter--ListView组件</a>
            
        </section>


    </article>
</div>

        </div>
        <footer id="footer" class="footer">
    <div class="copyright">
        <span>© ZhangPing | Powered by <a href="https://hexo.io" target="_blank">Hexo</a> & <a href="https://github.com/Siricee/hexo-theme-Chic" target="_blank">Chic</a></span>
    </div>
</footer>

    </div>
</body>
</html>
